<template>
	<div class="editAddressContent">
		<form>
			<div class="row clear">
				<div class="row-name fl">联系人:</div>
				<input type="text" placeholder="姓名" v-model="consignee" class="row-text fl"/>
			</div>
			<div class="row clear">
				<div class="row-name fl">联系电话:</div>
				<input type="text" placeholder="收货人电话" v-model="mobile" class="row-text fl" maxlength="11"/>
			</div>
			<div class="row clear" @click="popupFlag = true">
				<div class="row-name fl">所在地区:</div>
				<input type="text" placeholder="请选择" disabled :value="province+city+district" class="row-text fl"/>
				<router-link id="" to="" class="fr clearfix">
					<img src="../assets/image/ico_arrows@2x.png" class="to-add"/>
				</router-link>
			</div>
			<div class="row clear">
				<div class="row-name fl">详细地址:</div>
				<input type="text" placeholder="请填写" v-model="address" class="row-text fl"/>
			</div>
			<div class="row clear">
				<div class="row-name fl">设为默认</div>
				<mt-switch v-model="value" class="fr"></mt-switch>
			</div>
		</form>
    <div class="popup" @click="popupFlag = false" v-show="popupFlag">
      <mt-picker :slots="slots" @change="onValuesChange" value-key="name"></mt-picker>
    </div>

    <!--保存-->
    <a class="save" @click="editAddress">保存</a>
	</div>
</template>
<script>
  import Vue from 'vue'
  import '../assets/js/Region'
  import { Switch } from 'mint-ui';
  import { Picker } from 'mint-ui';
  import 'mint-ui/lib/picker/style.css';
  import 'mint-ui/lib/switch/style.css';

  Vue.component(Picker.name, Picker);
  Vue.component(Switch.name, Switch);
	export default {
    name: 'app',
		data () {return {
      addressMsg:{},
      token:'',
			value:false,
      consignee:'',
      mobile:'',
      province:'',
      city:'',
      district:'',
      provinceId:'',
      districtId:'',
      cityId:'',
      id:'',
      address:'',
      popupFlag:false,
      provinceList:[],
      cityList:["市级"],
      areaList:["县级"],
      slots:[],
      orderConsignee:'',
      isDefault:0,
		}},    
    mounted:function () {
      this.$nextTick(function () {
        this.fetch();
      })
    },
    watch : {
      mobile () {
        this.mobile = this.mobile.replace(/[^\d]/g, '');
      }
    },
		methods:{
      fetch:function () {
        this.addressMsg = JSON.parse(window.localStorage.getItem("editMsg") || '{}');
        console.log(this.addressMsg);
        this.token = this.addressMsg.token;
        this.consignee = this.addressMsg.consignee;
        this.mobile = this.addressMsg.mobile;
        this.province = this.addressMsg.province;
        this.city = this.addressMsg.city;
        this.district = this.addressMsg.district;
        this.address = this.addressMsg.address;
        this.provinceId = this.addressMsg.provinceId;
        this.districtId = this.addressMsg.districtId;
        this.cityId = this.addressMsg.cityId;
        this.id = this.addressMsg.id;

        var _this = this;
        if(this.addressMsg.isDefault == 0){
          _this.value= false;
        }else if(this.addressMsg.isDefault == 1){
          _this.value= true;
        }
        this.slots=[{
          flex: 1,
          values: province,
          className: 'slot1',
          textAlign: 'center',
          defaultIndex:5,
        }, {
          divider: true,
          content: '',
          className: 'slot2',
        }, {
          flex: 1,
          values: this.cityList,
          className: 'slot3',
          textAlign: 'center'
        }, {
          divider: true,
          content: '',
          className: 'slot4',
        }, {
          flex: 1,
          values: this.areaList,
          className: 'slot5',
          textAlign: 'center'
        }]
      },
      onValuesChange(picker, values) {
        var _this = this;
        if( values[0].type == 1){
          var pro = values[0];
          var proId = pro["id"];
          var cities = {};
          for (var i = 0; i < city.length; i++) {
            if (cities[city[i].parentId]) {
              cities[city[i].parentId].push(city[i])
            }else {
              cities[city[i].parentId] = [city[i]]
            }
          }
          _this.cityList=cities[proId];
          _this.slots[2].values=_this.cityList;
          _this.province = values[0].name;
          _this.provinceId = values[0].id;
        }else if(values[0].type == 2){
          var cityObject= values[0];
          var cityId = cityObject["id"];
          var areas = {};
          for (var i = 0; i < area.length; i++) {
            if (areas[area[i].parentId]) {
              areas[area[i].parentId].push(area[i])
            }else {
              areas[area[i].parentId] = [area[i]]
            }
          }
          _this.areaList=areas[cityId];
          _this.slots[4].values=_this.areaList;
          _this.city = values[0].name;
          _this.cityId = values[0].id;
        }else if(values[0].type == 3){
          _this.district = values[0].name;
          _this.districtId = values[0].id;
        }
      },
      editAddress:function () {
        var _this = this;
        if(this.value == false){
          _this.isDefault = 0;
        }else{
          _this.isDefault = 1;
        }
          if(_this.consignee && _this.mobile && _this.province && _this.city && _this.district && _this.address != ''|| null || undefined){
            const phoneReg = /^1[3|4|5|7|8]{1}\d{9}/;
            const type = 'register';
            if(!phoneReg.test(_this.mobile)) {
              alert("请输入正确手机号码");
              return;
            }else {
              this.orderConsignee = '{"consignee":"'+ this.consignee +'","provinceId":"'+ this.provinceId +'","province":"'+ this.province +'","cityId":"'+ this.cityId +'","city":"'+ this.city +'","districtId":"'+ this.districtId +'","district":"'+ this.district +'","address":"'+ this.address +'","mobile":"'+ this.mobile +'","isDefault":"'+ this.isDefault +'","id":"'+ this.id +'"}';
              this.$http.post(Util.ajaxPath.devOrderUrl+'shop-order/oms/api/modifyConsignee',{token:this.token,orderConsignee:this.orderConsignee},{emulateJSON : true}).then(function (res) {
                if(res.body.code == 13000){
                  _this.$router.push('selectAddress');
                }
              });
            }
          }else {
            if(_this.consignee == ''){
                alert("请输入联系人");
            }else if(_this.mobile == ''){
              alert("请输入联系电话");
            }else if(_this.province == ''|| _this.city =='' || _this.district==''){
              alert("请选择所在地区");
            }else if(_this.address == ''){
              alert("请输入详细地址");
            }
          }
      },
		}
	}
</script>
<style lang="scss">
.editAddressContent{
	header{
		height: 0.88rem;
		position:relative;
		border-bottom: 2px #f4f5f5 solid;
		background:#fff;
		.add-title{ width: 100%; height: 0.88rem; font-size:0.36rem; line-height: 0.88rem; text-align:center; color: #2e2e2e;}
		.back-icon{ width: 0.44rem; height: 0.44rem; position: absolute; left: 0.3rem; top: 0.22rem;}
	}
	form{
		.row{
			width: 100%; height: 0.88rem; background:#fff; margin-bottom:0.04rem;
			.row-name{ width: 1.65rem; height:0.88rem; font-size: 0.24rem; text-indent: 0.31rem; line-height: 0.88rem; color: #333;}
			.row-text{ display:block; width:4.2rem; height: 0.88rem; border: 0; outline:none; font-size: 0.28rem; line-height: 0.88rem; color: #333;}
			::-webkit-input-placeholder {color: #aaa; font-size: 0.28rem; text-align: left;}
      input:disabled{ background: #fff;}
			a{
				display:block; height:0.88rem;
				.to-add{display: block; width: 0.14rem; height: 0.24rem; padding: 0.32rem 0.3rem 0.32rem 0;}
			}
		}
	}
	.mint-switch{
		margin: 0.12rem 0.29rem 0.12rem 0;
		.mint-switch-input:checked + .mint-switch-core{border-color:#ff365d; background: #ff365d;}
	}
  .popup{width: 100%; height: 100%; background: rgba(0,0,0,0.2); position: fixed; left: 0; top: 0; z-index: 9999;}
  .picker{position:fixed; bottom:0; left:0; z-index: 10000; width: 100%; background: #fff;}
  .picker-item{ font-size: 0.3rem;}
  .save{ width: 100%; height: 0.98rem; line-height: 0.98rem; text-align: center; font-size: 0.3rem; color: #fefefe; background: linear-gradient(to right,#fe4a6b,#e8163f); position: fixed; left: 0; bottom: 0; z-index: 20; }

}
</style>
